<template>
  <div class="data_container">
    <div class="data_main">
      <!-- 主体头部 -->
      <div class="top_area">
        <i class="el-icon-arrow-left"></i>
        <span class="return_operation" @click="returnOperation">返回</span>
        <span class="leftVertical_ine"></span>
        <span class="data_name">创建算法</span>
        <span style="display: inline-block; float: right">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </span>
      </div>
      <!-- 主体区域 -->
      <div class="form">
        <el-form
          :model="ruleForm"
          :label-position="labelPosition"
          :rules="rules"
          ref='ruleForm'
          label-width="9rem"
        >
          <template v-for="(item, index) in formData">
            <el-form-item
              v-if="item.type === 'singleBox'"
              :label="item.text"
              :prop="item.id"
              :key="index"
              :type="item.type"
            >
              <el-radio-group v-model="ruleForm[item.id]">
                <el-radio-button
                  v-for="(item1, index1) in item.op"
                  :label="item1.value"
                  :key="index1"
                > {{item1.text}}</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <!-- 下拉框 -->
            <el-form-item
              v-else-if="item.type === 'drop' && item.ids == ruleForm.type"
              :prop="item.id"
              :key="index"
            >
              <el-select
                v-model="ruleForm[item.id]"
                :placeholder="item.placeHolder"
                @change="(val)=>checkChange(val,allNewList)"
              >
                <el-option
                  v-for="(item1, index) in allDataList[item.id]"
                  :key="index"
                  :value="item1"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              :label="item.text"
              v-else-if="item.type === 'description'"
              :prop="item.id"
              :key="index"
            >
              <el-input
                type='textarea'
                v-model="ruleForm[item.id]"
                :placeHolder="item.placeHolder"
                :autosize="{minRows:4,maxRows:6}"
              ></el-input>
            </el-form-item>
            <el-form-item
              :label="item.text"
              v-else-if="item.ids == ruleForm.type"
              :prop="item.id"
              :key="index"
            >
              <el-input
                v-model="ruleForm[item.id]"
                :placeHolder="item.placeHolder"
              ></el-input>
            </el-form-item>
            <el-form-item
              :label="item.text"
              v-else-if="item.id === 'name'"
              :prop="item.id"
              :key="index"
            >
              <el-input
                v-model="ruleForm[item.id]"
                :placeHolder="item.placeHolder"
              ></el-input>
            </el-form-item>
          </template>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import infoComponentVue from '../../../../components/infoComponent/infoComponent.vue';
import data from '../../../../components/createData.js';
export default {
  components: {
    infoComponentVue,
  },
  data() {
    return {
      labelPosition: 'left',
      ruleForm: {
        'type': 0,
        'name': '',
        'description': '',
        'code_dir': '',
        'boot_file': '',
        'engine_id': '',
        'engine_name': '',
        'engine_version': '',
        'image_url': '',
        'command': '',
      },
      allDataList:{
        'engine_id': []
      },
      allNewList: [],
      formStates:{},
      rules: {},
      formData: data.algorithmOptions,
    };
  },
  created() {
    this.formData.forEach((element, index) => {
      this.rules[element.id] = element.rule;
    });
    this.ruleForm.type = 0;
    this.getData();
  },
  methods: {
    // 返回上一级
    returnOperation() {
      this.$router.push({ path: '/Algorithm' });
    },
    checkChange(val, list){
      list.forEach(item=>{
        if( item.engine_id === val){
          this.formStates['engine_name']=item['engine_name'];
          this.formStates['engine_version']=item['engine_version']
        }
      })
    },
    // 创建
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.ruleForm.type === 0){
            this.ruleForm['engine_name']=this.formStates['engine_name'];
            this.ruleForm['engine_version']=this.formStates['engine_version']
          }
          this.$url.post('data/train/algorithm', this.ruleForm).then((res) => {
            if (res.status === 200) {
              this.$message.success('创建成功');
              this.$router.push({ path: '/Algorithm' });
            } else {
              this.$message.error('创建失败');
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getData() {
      this.$url.get('data/train/engine').then((res) => {
        this.allDataList['engine_id']= res.data.data.engine_list.map((item) => {
          return item.engine_id;
        });
        this.allNewList= res.data.data.engine_list
      });
    },
  },
  watch: {
    'ruleForm.type': {
      handler(val) {
        let temp, op;
        this.formData.forEach((item) => {
          if (item.id == 'type') {
            op = item.op;
          }
        });
        temp = op.filter((ite) => {
          return ite.text === val;
        });
      },
    },
  },
};
</script>

<style lang="less" scoped>
.data_container {
  // 主体区域样式
  .data_main {
    width: 1520px;
    height: 710px !important;
    .top_area{
      margin-bottom: 40px;
    }
    .form {
      width: 760px !important;
      padding:10px 740px 10px 30px;
      border: 1px solid #e6e6e6;
      .el-form-item {
        margin-top: 20px;
      }
      .el-select{
        width: 616px;
      }
    }
  }
}
</style>
